<template>
	<view>
		<tn-tabs activeColor="#ffd947" inactiveColor="#fff" bold  :list="scrollList" :current="current" :isScroll="false" backgroundColor="#0a47c4"
			@change="tabChange"></tn-tabs>

		<!-- 考试大厅 -->
		<view v-if="current===0">
			<view class="tn-margin-sm">
				<block v-for="(item, index) in list" :key="index">
					<uni-card class="card kecheng" :isFull="true" @click="toDetail(item)">
						<image v-if="item.image" style="height: 150px;width: 100%;" :src="item.image"></image>
						<image v-else src="/static/course_default.jpg" style="height: 150px;width: 100%"></image>
						<view>
							<view class="tn-padding-sm tn-no-padding-top">
								<view class="tn-text-xl tn-text-bold" style="line-height: 25px;color: #3a3a3a;padding: 0 !important;">{{ item.name }}</view>
								<view class="_tit tn-color-gray">{{ item.content }}</view>
								<view class="_tit tn-color-gray time">{{ item.createTime }}</view>
							</view>
						</view>
					</uni-card>
				</block>
				<view class="tn-margin-sm">
					<uni-pagination :total="total" v-model="query.current" :pageSize='query.size'></uni-pagination>
				</view>
			</view>
		</view>
		<!-- 我的考试 -->
		<view v-if="current===1">
			<view class="tn-margin-sm">
				<block v-for="(item, index) in list" :key="index">
					<uni-card  class="card" :title="item.name" :isFull="true">
						<uni-row>
								<text class="tn-text-md">培训描述：<text class="tn-color-gray">{{item.content}}</text></text>
						</uni-row>
						<uni-row>
								<text class="tn-text-md">需培训：<text class="tn-color-gray">{{secondsToHMS(item.sumDur)}}</text></text>
						</uni-row>
						<uni-row>
								<text class="tn-text-md">已培训：<text class="tn-color-gray">{{secondsToHMS(item.gkDur)}} </text></text>
						</uni-row>
						<uni-row>
								<text class="tn-text-md">培训进度：<text class="tn-color-gray">{{Number(item.gkPercent).toFixed(2)>=100?100:Number(item.gkPercent).toFixed(2)}} %</text></text>
						</uni-row>
					</uni-card>
				</block>
				<view class="tn-margin-sm">
					<uni-pagination :total="total" v-model="query.current" :pageSize='query.size'></uni-pagination>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		secondsToMinutes,secondsToHMS
	} from '@/utils/formatData'
	import {
		courselogPaging,
		detailPC
	} from '@/api/training.js'
	export default {
		data() {
			return {
				userInfo: null,
				current: 0,
				query: {
					params: {},
					current: 1,
					size: 10
				},
				total: 0,
				scrollList: [{
						name: '培训课程',
					},
					{
						name: '我的培训'
					},
				],
				list: [],
			}
		},
		created() {
			this.load()
			let userInfo = uni.getStorageSync("userInfo")
			this.userInfo = userInfo
		},
		methods: {
			secondsToMinutes,
			secondsToHMS,
			load() {
				if (this.current === 0) {
					courselogPaging(this.query).then(res => {
						if (res.code === 0) {
							this.total = res.data.total
							this.list = res.data.records
						}
					})
				} else {
					this.query.params = {
						userId: this.userInfo.id
					}
					detailPC(this.query).then(res => {
						if (res.code === 0) {
							this.total = res.data.total
							this.list = res.data.records
						}
					})
				}
			},
			tabChange(val) {
        this.list = []
				this.current = val
				this.query = {
					params: {},
					current: 1,
					size: 10
				}
				this.load()
			},
			toDetail({
				id
			}) {
				uni.navigateTo({
					url: '/pages/training/detail/detail?id=' + id
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	._tit{
		font-size: 32rpx;
		line-height: 25px !important;
		padding: 0 !important;
	}
	.time{
		font-size: 30rpx;
	}
	.kecheng{
		padding: 0 !important;
	}
	.card {
		margin: 0 !important;
		border-radius: 10px;
		margin-top: 15px !important;
		::v-deep {
			.uni-card__content {
				padding: 0 !important;
			}
			.uni-card__header {
				.uni-card__header-box {
					.uni-card__header-content-title {
						font-size: 32rpx;
						font-weight: bold;
					}
				}
			}
			.title{
				color: #333;
				line-height: 1.5em;
				font-size: 32rpx;
				font-weight: bold;
			}
			view{
				padding: 2px;
				line-height: 2em;
			}
			.value {
				color: $tn-color-gray;
			}
		}
	}
</style>
